import React, { useState } from 'react';
import { Input } from 'antd';
import { InputProps } from 'antd/lib/input';
import { InbizIcon } from '@inbiz/utils';

type IProps = {
  onSearch?: (e: string | undefined) => void;
  onChange?: (e: any) => void;
  ref?: any;
} & InputProps;

const MySearch = (props: IProps) => {
  const { onChange, onClick, onSearch, ref, style, ...other } = props;
  const [nowValue, $nowValue] = useState<string>();
  return (
    <Input
      ref={ref}
      // 兼容Input框的原有属性
      {...other}
      style={{ ...style }}
      // 同步外部值
      onChange={(e: any) => {
        $nowValue(e.target.value);
        onChange && onChange(e);
      }}
      // 点击回车触发搜索
      onPressEnter={() => {
        onSearch && onSearch(nowValue);
      }}
      // 点击按钮触发搜索（设置图标搜索图标样式）
      suffix={
        <span
          style={{ cursor: 'pointer' }}
          onClick={() => {
            onSearch && onSearch(nowValue);
          }}
        >
          <InbizIcon type="icon-ic-sousuo" style={{ color: '#aaa' }} />
        </span>
      }
    />
  );
};

export default MySearch;
